<template>
	<div>
		<img class="w-[100%] h-[112px]" src="@/assets/images/dy.jpeg">
		<div class="font-bold text-[20px] mt-[10px]">发布视频</div>
		<el-divider />
		<!-- 文件上传区域 -->
		<div class="bg-[#f4f5f5] h-[440px] rounded-[10px] p-[20px]">
			<!-- 未上传视频 -->
			<div class="flex justify-between items-center tips" v-if="video.uploadVideoInfo.videoUrl">
				<div>你还有上次未发布的视频，是否继续编辑？</div>
				<div>
					<el-button type="primary" text="primary">
						<span class="font-bold" @click="proxy.$router.push('/uploadVideoDetail')">
							继续
						</span>
					</el-button>
					<el-button type="info" text="info"><span class="font-bold" @click="abandonUpload">放弃</span></el-button>
				</div>
			</div>
			<!-- 文件上传 -->
			<el-upload class="upload-demo h-[300px]" drag action="#" multiple :http-request="handleSuccess"
				:show-file-list="false">
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">
					<div class="text-[20px] font-bold text-[#161823] mb-[10px]">点击上传 或直接将视频文件拖入此区域</div>
					<div>为了更好的观看体验和平台安全，平台将对上传的视频预审。超过40秒的视频建议上传横版视频</div>
				</div>
			</el-upload>
			<!-- 提示 -->
			<div class="flex justify-between w-[100%] mt-[50px]">
				<div class="flex" v-for="item in videoTag" :key="item.id">
					<img :src="item.url" class="w-[40px]">
					<div class="ml-[10px]">
						<div class="text-[#050d10] text-[14px] font-bold">{{ item.text }}</div>
						<div class="text-[12px]">{{ item.tag }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script setup>
import { ref } from 'vue'
import { uploadVideo, merge } from '@/api/user.js'
import v1 from '@/assets/images/v1.png'
import v2 from '@/assets/images/v2.png'
import v3 from '@/assets/images/v3.png'
import { uploadFile as upload } from "@/utils/uplaodVideo"
const videoTag = ref([
	{ id: 1, url: v1, text: "视频格式", tag: '支持常用视频格式，推荐mp4、webm' },
	{ id: 2, url: v2, text: "视频大小", tag: '视频文件大小不超过16G，时长在60分钟以内' },
	{ id: 3, url: v3, text: "视频分辨率", tag: '推荐分辨率范围：720P-1080P，最大支持上传4k(3840 x 2160)' }

])

// 自定义上传
const handleSuccess = async ({ file }) => {

	const chunkSize = 5 * 1024 * 1024; // 5MB
	const totalChunks = Math.ceil(file.size / chunkSize);
	for (let i = 0; i < totalChunks; i++) {
		const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
		const formData = new FormData();
		formData.append('file', chunk);
		formData.append('chunkIndex', i);
		formData.append('chunkTotal', totalChunks);
		formData.append('identifier', file.name);
		console.log(formData)
		const res = await uploadVideo(formData)
		console.log("ces", res)
	}

	// 合并文件
	const formData = new FormData()
	formData.append("identifier", file.name)
	formData.append("chunkTotal", totalChunks)
	const res = await merge(formData)
	console.log(res)
}

</script>

<style scoped lang="scss">
:deep(.el-upload-dragger) {
	height: 300px !important;
}
</style>